<template>
  <div class='dialog'>
    <el-dialog v-model='showRef' :width='width' :close-on-click-modal='false' append-to-body destroy-on-close @close='clickClose'>

      <template #header>
        <div class='head'>
          <h4>{{ title }}</h4>
        </div>
      </template>

      <div class='content'>
        <slot name='content'>

        </slot>
      </div>


    </el-dialog>


  </div>
</template>

<script setup>
import { watch } from 'vue';

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '800px',
  },
  title: {
    type: String,
    default: '',
  },
});

const emits = defineEmits(['update:dialogVisible']);
const clickClose = () => {
  showRef.value = false;
  emits('update:dialogVisible', false);
};

const showRef = ref(false);

watch(()=>props.dialogVisible,data=> {  
  showRef.value = data
})


</script> 

<style lang='scss' scoped>
.dialog {
  .head {
    h4 {
      font-size: 22px;
      color: #2F2F2F;
      font-weight: 400;
    }
  }

}
</style>
